<template>
  <div class="home-page">
    <div class="title">
      辽宁房产数据大屏
      <img src="@/assets/img/personInfor/title-bg.png" alt="" />
    </div>
    <div class="list">
      <div
        :class="index == active ? 'gird-box gird-box-active' : 'gird-box'"
        v-for="(item, index) in listData"
        :key="index"
        @click="linkTo(index, item.url)"
      >
        <img class="home-list-logo" src="@/assets/img/personInfor/home-list-logo.png" alt="" />
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const active = ref<number>(0);
const listData = reactive([
  {
    name: "保交楼数据监控中心",
    url: "/bjBuilding",
  },
  {
    name: "个人住房信息数据挖掘分析",
    url: "/personInfor",
  },
  {
    name: "住房保障管理监测分析",
    url: "/houseAdmin",
  },
  {
    name: "房产分析供需预测分析-统计",
    url: "/housePropertyAnalysis/statistics",
  },
  {
    name: "房产分析供需预测分析-分析",
    url: "/housePropertyAnalysis/analysis",
  },
  {
    name: "房产分析供需预测分析-模拟测算",
    url: "/housePropertyAnalysis/forecast",
  },
  {
    name: "企业信用分析",
    url: "/enterpriseCreditAnalysis",
  },
  {
    name: "工程项目监测分析",
    url: "/projectMonitoringAnalysis",
  },
  {
    name: "土地综合分析",
    url: "/landComprehensiveAnalysis",
  },
  {
    name: "房屋安全管理监测分析",
    url: "/housingSafetyManagementMonitoringAnalysis",
  },
  {
    name: "房地产市场监管预警平台",
    url: "/main",
  },
  {
    name: "各行政部门效能监测分析",
    url: "/eachAdmin",
  },
  {
    name: "房产业务全生命周期管理",
    url: "/propertyLife",
  },
  {
    name: "基于GIS的房地产市场分析预警",
    url: "/gisPage",
  },
  {
    name: "房地产监测预警驾驶舱",
    url: "/housePropertyAnalysisAndForecast",
  },
  {
    name: "房地产市场交易检测分析",
    url: "/houseDetecAnalysis",
  },
  {
    name: "资金监管数据汇聚",
    url: "/fundAdminDataConverge",
  },
  {
    name: "开发建设",
    url: "/housePropertyDevelopmentConstruction",
  },
  {
    name: "商品房供应",
    url: "/housePropertyCommodityHouseSupply",
  },
  {
    name: "保交房情况",
    url: "/guaranteeDeliveryHouseCondition",
  },
  {
    name: "停缓建项目盘活情况",
    url: "/stoppedSuspendedProjectVitalizeCondition",
  },
  {
    name: "新建商品房需求预测",
    url: "/newCommodityHouseDemandForecast",
  },
]);
const linkTo = (index: number, url: string) => {
  active.value = index;
  // 打开新窗口
  window.open(url, "_blank");
};
</script>

<style scoped lang="less">
.home-page {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/img/personInfor/bg.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;
  .title {
    height: 77px;
    width: 758px;
    margin: 0 auto;
    margin-top: 77px;
    margin-bottom: 45px;
    text-align: center;
    text-shadow: 3px 3px 2px #040b28;
    font-weight: 800;
    font-size: 48px;
    color: #fefefe;
    line-height: 36px;
    background: radial-gradient(0deg, #ffffff 0%, #a1b8ea 100%);
    position: relative;
    img {
      width: 100%;
      height: 47px;
      object-fit: cover;
      position: absolute;
      left: 0;
      top: 30px;
    }
  }
  .list {
    display: grid;
    grid-gap: 36px 59px;
    grid-template-columns: repeat(3, 503px);
    grid-auto-rows: 105px;
    place-content: start center;
    overflow: auto;
    height: calc(100% - 272px);
    width: 1678px;
    margin: 0 auto;
    // 设置滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: #4e78c5;
    }
    &::-webkit-scrollbar-track {
      border-radius: 3px;
      background-color: #0a1d49;
    }
    .gird-box {
      font-weight: 800;
      font-size: 28px;
      color: #fefefe;
      display: flex;
      align-items: center;
      text-shadow: 4px 2px 7px #040d26;
      background: url("@/assets/img/personInfor/home-list.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      .home-list-logo {
        width: 55px;
        height: 55px;
        margin-left: 49px;
        margin-right: 6px;
      }
    }
    .gird-box-active {
      background: url("@/assets/img/personInfor/home-list-active.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
